/*
 * 用户列表搜索
 * @Author: ljb
 * @Date: 2018-03-27 17:51:07
 * @Last Modified by: ljb
 * @Last Modified time: 2019-08-28 15:21:43
 */
<style lang="less" rel="stylesheet/less" type="text/less">
	.user-search-form {
		padding-left: 40px;
		.ivu-form-item-label {
			font-size: 16px;
		}
	}
</style>

<template>
	<Form
		ref="formInline"
		name="user_query__form"
		class="user-search-form"
		inline
		@keydown.native.enter.prevent="confirmSearch">

		<Form-item
			:label-width="80"
			:label="$t('skin_record.phone')">
			<i-input
				v-model="formValidate.phone"
				:placeholder="$t('skin_record.please_enter_phone_number')"
				name="user_query__phone"
				size="large"/>
		</Form-item>

		<Form-item
			:label-width="60"
			:label="$t('skin_test.gender')" >
			<Select
				v-model="formValidate.gender"
				:style="{width: '150px'}"
				name="user_query__gender"
				size="large"
				clearable>
				<Option
					v-for="option in options"
					:value="option.value"
					:key="option.value">{{ option.label }}</Option>
			</Select>
		</Form-item>

		<!-- 开始时间 -->

		<Form-item
			:label="$t('announcement.started_at')"
			:label-width="100"
		>
			<DatePicker
				v-model="formValidate.started_at"

				:placeholder="$t('announcement.please_select_started_at')"
				type="datetime"
				placement="top"
				name="user_query-started_at"
				@on-change="changeSTDate"
			/>
		</Form-item>

		<!-- 结束时间 -->
		<Form-item
			:label="$t('announcement.ended_at')"
			:label-width="100"
		>
			<DatePicker
				v-model="formValidate.ended_at"

				:placeholder="$t('announcement.please_select_ended_at')"
				type="datetime"
				placement="top"
				name="user_query-ended_at"
				@on-change="changeEDDate"
			/>
		</Form-item>

		<Form-item>
			<Button
				type="primary"
				name="user_query__search"
				@click="confirmSearch">
				{{ $t('common.search') }}
			</Button>
		</Form-item>

	</Form>
</template>
<script>

export default {

	data() {
		return {
			real_started_at: '',

			real_ended_at: '',

			options: [
				{
					value: '0',
					label: this.$t('skin_test.unknown'), // 无
				},
				{
					value: '1',
					label: this.$t('skin_test.male'), // 无
				},
				{
					value: '2',
					label: this.$t('skin_test.female'), // 有
				},
			],

			formValidate: {
				phone: null, // 手机号码
				gender: '',		// 性别
				started_at: '',
				ended_at: '',
			}, // 搜索框的对象参数
		};
	},

	methods: {
		// 格式化时间
		changeSTDate(date) {
			this.real_started_at = date;
		},

		changeEDDate(date) {
			this.real_ended_at = date;
		},

		/**
         * 确认搜索
         * @return {undefined}
         */
		confirmSearch() {
			const param = {
				phone: this.formValidate.phone,

				gender: this.formValidate.gender,

				start_time: this.real_started_at,

				end_time: this.real_ended_at,

			};

			this.$emit('search', param);
		},

	},

};

</script>
